<!-- 模块说明 -->
<script setup lang='ts'>
// import {ref} from 'vue'
interface list {
  info: any;
}
defineProps<list>();
</script>
<template>
  <div class="product">
    <router-link :to="'/shop/' + info.id">
      <div class="top">
        <img
          :src="
            'http://182.92.162.156:8083/product/downpropic?filename=' + info.img
          "
        />
      </div>
      <div class="bottom">
        <p>{{ info.proname }}</p>
        <p class="desc">{{ info.proinfo }}</p>
        <p class="price">￥{{ info.price }} <van-icon name="cart-o" class="cart" size="24px" color="#ee0a24" /></p>
      </div>
    </router-link>
   
  </div>
</template>

<style lang="scss" scoped>
.product {
  width: 150px;
  height: 230px;
  margin: 10px 16px;
  box-sizing: border-box;
  box-shadow:  5px 5px 10px rgba(0, 0, 0, 0.5); ;
  .top {
    text-align: center;
    height: 150px;
    img{
      width: 100%;
      height: 150px;
    }
  }
  .bottom {
    text-align: center;
    p{
      margin: 2px 2px ;
    }
    .desc {
      width: 150px; /* 设置文本容器宽度，根据需要调整 */
      white-space: nowrap; /* 禁止换行 */
      overflow: hidden; /* 超出部分隐藏 */
      text-overflow: ellipsis; /* 显示省略号 */
    }
    .price{
      color: red;
      font-size: 24px;
    }
    .cart{
      .cart::before{
        size: 20px;
      }
    }
  }
}
</style>
